<template>
  <t-step-wizard
    style="min-height: 100px"
    :stepData="stepData"
    :active="active"
    :successTitle="successTitle"
    @complete="complete"
  >
    <template v-for="step in stepData" :key="step.id" v-slot:[`${step.id}`]>
      {{ step.title }}
    </template>
  </t-step-wizard>
</template>

<script setup lang="ts">
import { ref, reactive, defineEmits, computed } from "vue";

const active = ref(0);
const successTitle = ref("步骤完成");
const emit = defineEmits(["nextVal"], ["backVal"], ["complete"]);
const next = (val) => {
  emit("nextVal", val);
  switch (val.params) {
    case dynamicData.value.length - 1:
      active.value += 2;
      break;
    default:
      active.value += 1;
      break;
  }
};
const back = (val) => {
  emit("backVal", val);
  switch (val.params) {
    case dynamicData.value.length - 1:
      active.value -= 1;
      break;
    default:
      active.value -= 1;
      break;
  }
};

// 完成处理函数
const complete = () => {
  emit("complete");
  active.value = 0;
};
let idCounter = 1;
// 定义步骤数据
const dynamicData = ref([
  { id: 1, title: "创建账户" },
  { id: 2, title: "填写基础信息" },
  { id: 3, title: "填写用户信息" },
  { id: 4, title: "进行中" },
  { id: 5, title: "注册成功" },
]);

const stepData = computed(() => {
  return dynamicData.value.map((step) => ({
    ...step,
    slotName: String(step.id),
    btnArr:
      step.id !== 1
        ? [
            { btnTitle: "上一步", params: step.id, fn: back },
            { btnTitle: "下一步", params: step.id, fn: next },
          ]
        : [{ btnTitle: "下一步", params: step.id, fn: next }],
  }));
});

defineExpose({
  dynamicData,
  next,
  back,
  active,
  successTitle,
  complete,
});
</script>
